<template>
    <div class="tabber">
        <span class="tab-itme" @click="switchTo('/home')">
            <img :src="$route.path.includes('/home') ? tabBarImgArr[0].selected:tabBarImgArr[0].normal" alt="">
            <span :class="{on: '/home' === $route.path}">首页</span>
        </span>
         <span class="tab-itme" @click="switchTo('/recommend')">
             <img :src="$route.path.includes('/recommend') ? tabBarImgArr[0].selected:tabBarImgArr[0].normal" alt="">
            <span :class="{on: '/recommend' === $route.path}">推荐</span>
        </span>
         <span class="tab-itme" @click="switchTo('/search')">
              <img  :src="$route.path.includes('/search') ? tabBarImgArr[0].selected:tabBarImgArr[0].normal" alt="">
            <span :class="{on: '/search' === $route.path}">搜索</span>
        </span>
         <span class="tab-itme" @click="switchTo('/chat')">
              <img  :src="$route.path.includes('/chat') ? tabBarImgArr[0].selected:tabBarImgArr[0].normal" alt="">
            <span :class="{on: '/chat' === $route.path}">聊天</span>
        </span>
         <span class="tab-itme" @click="switchTo('/me')">
              <img :src="$route.path.includes('/me') ? tabBarImgArr[0].selected:tabBarImgArr[0].normal" alt="">
            <span :class="{on: '/me' === $route.path}">个人中心</span>
        </span>
    </div>
</template>

<script>
export default {
  name: 'TabBer',
  data () {
    return {
      tabBarImgArr: [
        {normal: require('./../../common/img/icon_home.png'), selected: require('./../../common/img/icon_home_selected.png')},
        {normal: require('./../../common/img/icon_intro.png'), selected: require('./../../common/img/icon_intro_selected.png')},
        {normal: require('./../../common/img/icon_search.png'), selected: require('./../../common/img/icon_search_selected.png')},
        {normal: require('./../../common/img/icon_chat.png'), selected: require('./../../common/img/icon_chat_selected.png')},
        {normal: require('./../../common/img/icon_mine.png'), selected: require('./../../common/img/icon_mine_selected.png')}
      ]
    }
  },
  methods: {
    switchTo (path) {
    // console.log(this.$router)
      this.$router.replace(path)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .tabber
    width 100%
    height 50px
    background-color #fff
    position fixed
    left 0
    right 0
    bottom 0
    display flex
    z-index 99
    .tab-itme
      display flex
      flex 1
      flex-direction column
      align-items center
      justify-content center
      font-size 14px
      color #666
      img
        width 35%
        margin-bottom 2px
      .on
        color red
</style>
